
/***********#**************
 * Author = Joker
 * createTime = 2022/12/1 10:52
 * describe = Login数据文件
 * ---------meta数据---------
 * title = 登录
 * ***********#**************/
import React, {useRef, useState} from 'react';
import {Link, useNavigate} from "react-router-dom";
import './index.less'
import {Button, Col, Form, Input, Row,message} from "antd";
import store from "../../store/index.js";
import {tokenAction} from "../../store/actionCreator/index.js";

function Login(props) {
    const navigate = useNavigate();
    const formRefDiv = useRef(null);
    const [formRef] = Form.useForm();
    const [isLogin,setIsLogin] = useState(true);
    const [formValue,setFormValue] = useState(()=>({
        username:'username',
        password:'password',
        code:'123456'
    }))
    const setState = (type)=>{
        return ({target:{value}})=>{
            setFormValue({
                ...formValue,
                [type]:value
            })
        }
    }
    const login = async () => {
        await formRef.validateFields()
        message.success('登录成功')
        store.dispatch(tokenAction('zheshitoken'))
        navigate('/home/user')
    }
    const forgetPassword = async ()=>{
        await formRef.validateFields()
        message.success('修改密码')
    }
    const rules = {
        username:[
            {
                required:true,
                message:'请输入用户名',
                validateTrigger:['onBlur','onInput']
            }
        ],
        password:[
            {
                required:true,
                message:'请输入密码',
                validateTrigger:['onBlur','onInput']
            }
        ],
        code:[
            {
                required:true,
                message:'请输入验证码',
                validateTrigger:['onBlur','onInput']
            }
        ]
    }
    const changeView = async ()=>{
        formRefDiv.current.classList.add('rotate');
        setTimeout(()=>{
            formRefDiv.current.classList.remove('rotate')
        },500)
        setTimeout(()=>{
            formRef.resetFields();
            setFormValue({})
            setIsLogin(!isLogin)
        },250)
    }
    return (
        <div className={'Login'}>
            <div className={'form'} ref={formRefDiv}>
                <div className={'title'}>{isLogin?'LOGIN':'FORGET PASSWORD'}</div>
                <Form name={'formState'} form={formRef} initialValues={formValue}>
                    <Form.Item name="username" rules={rules.username}>
                        <Input value={formValue.username} onChange={setState('username')} placeholder={`请输入${isLogin?'用户名':'手机号'}`}></Input>
                    </Form.Item>
                    <Form.Item name="password" rules={rules.password}>
                        <Input.Password value={formValue.password} onChange={setState('password')} placeholder={`请输入${isLogin?'':'新'}密码`}></Input.Password>
                    </Form.Item>
                    <Form.Item name="code" rules={rules.code}>
                        <Row gutter={16}>
                            <Col span={18}>
                                <Input value={formValue.code} onChange={setState('code')} placeholder={'请输入验证码'}></Input>
                            </Col>
                            <Col span={6}><Button style={{width: '100%'}}>发送验证码</Button></Col>
                        </Row>
                    </Form.Item>
                    <Button onClick={isLogin?login:forgetPassword} style={{width: '100%'}} type={'primary'}>{isLogin?'登录':'修改密码'}</Button>
                </Form>
                <div style={{textAlign: 'right'}}>
                    <span onClick={changeView} className={'forgetPassword'}>忘记密码</span>
                </div>
            </div>
        </div>
    );
}

export default Login;